<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <style>
        body {
            width: 100%;
            color: white;
        }

        form {
            width: 400px;
            border: 1px solid blue;
            margin: 0 auto;
            overflow: hidden;
            background: cornflowerblue;
        }

        label {
            white-space: nowrap;
            display: inline-block;
            width: 70px;
            text-align-last: justify;
            margin-right: 10px;
        }

        form > div {
            white-space: nowrap;
            position: relative;
            left: 20%;
            margin: 20px auto;
        }

        form > div:last-of-type > input {
            margin-left: 25px;
        }

        form > div > input[id] {
            width: 200px;
            padding-left: 5px;
        }

        input[type=radio]:last-of-type {
            margin-left: 15px;
        }
    </style>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $.getJSON("gradeJsonServlet", function (data) {
                $.each(data, function (i, item) {
                    $("#gradeid").append(new Option(item.gname, item.id));
                });
            });

            $("#submit").click(function () {
                var mydata =$("#form").serialize();//获得表单中所有的值
                $.post("addSubject",mydata,function(rtn){alert(rtn);});
            });
        });
    </script>
</head>
<body>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<form method="post" enctype="multipart/form-data" id="form">
    <div>
        <h2>学生信息添加表</h2>
    </div>
    <div>
        <label for="username">学生姓名</label>
        <input type="text" name="username" id="username">
    </div>
    <div>
        <label for="password">密码</label>
        <input type="password" name="password" id="password">
    </div>
    <div>
        <label>性别</label>
        <input type="radio" name="sex" value="男" checked>男
        <input type="radio" name="sex" value="女">女
    </div>
    <div>
        <label for="telephone">手机号码</label>
        <input type="tel" name="telephone" id="telephone">
    </div>
    <div>
        <label for="address">地址</label>
        <input type="text" name="address" id="address">
    </div>
    <div>
        <label for="fromcity">来自城市</label>
        <input type="text" name="fromcity" id="fromcity">
    </div>
    <div>
        <label for="enterdate">入学时间</label>
        <input type='date' name='enterdate' id='enterdate' value='${date}' name='date'/>
    </div>
    <div>
        <label for="gradeid">班级编号</label>
        <select name="gradeid" id="gradeid">
        </select>
    </div>
    <div>
        <label for="qq">QQ</label>
        <input type="text" name="qq" id="qq">
    </div>
    <div>
        <label for="wechat">微信</label>
        <input type="text" name="wechat" id="wechat">
    </div>
    <div>
        <label for="idcardpicpath">头像</label>
        <input type="file" name="idcardpicpath" id="idcardpicpath">
    </div>
    <div>
        <label for="bir">生日</label>
        <input type='date' name='bir' id='bir' value='${date}' name='date'/>
    </div>
    <div>
        <input type="button" value="提交" id="submit">
        <input type="reset" value="重置">
    </div>
</form>
</body>
</html>

